<template>
	<!-- 标题 -->
	<div class="g-title">
		<h2>城市</h2>
		<input type="text" placeholder="请输入搜索内容" />
		<h2>登录</h2>
	</div>

	<!-- 轮播 -->
	<van-swipe  :autoplay="3000" indicator-color="white">
		<!-- <van-swipe-item>
			<van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
		</van-swipe-item>
		<van-swipe-item
			><van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
		/></van-swipe-item>
		<van-swipe-item
			><van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
		/></van-swipe-item>
		<van-swipe-item
			><van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
		/></van-swipe-item> -->

        <van-swipe-item v-for="item in bannerList" :key="item.id">
            <van-image width="100%" height="200" :src="item.url"/>
        </van-swipe-item>

	</van-swipe>
</template>

<script setup>
import axios from 'axios'
import {onMounted, ref} from 'vue'
const bannerList = ref([])

const getBannerList = ()=>{
    axios({
        url:'http://47.109.74.84:8089/api/banner',
        method:'GET'
    }).then(res=>{
        const data = res.data
        if(data.resultCode == 1){
            bannerList.value = data.resultInfo.list
        }
    })
}

 onMounted(() => {
    getBannerList()
 })

</script>

<style lang="css" scoped>
.g-title {
	display: flex;
	height: 40px;
	background-color: #ff0000;
	justify-content: space-between;
	align-items: center;
}

.g-title h2 {
	color: white;
	font-size: 16px;
	font-weight: normal;
	width: 60px;
	text-align: center;
}
.g-title input {
	flex: 1;
	border: none;
	height: 30px;
	outline: none;
	border-radius: 8px;
	text-indent: 5px;
	font-size: 14px;
}

</style>
